<template>
	<div>
		<!-- 增加来源 -->
		<el-dialog title="一键更新" :visible.sync="visible" width="60%">
			<el-form inline :model="query" label-width="80px">
				<el-form-item label="科目">
					<el-select placeholder="请选择科目" v-model="query.appid" class="margin-right10 width260" clearable
						@change="appidChange">
						<el-option v-for="miniApp in miniApps" :key="miniApp.id" :label="miniApp.name"
							:value="miniApp.appid"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题型">
					<el-select v-model="query.type" placeholder="请选择题型" clearable class="margin-right10 width260">
						<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="章节分类">
					<el-select filterable v-model="query.categoryId3" placeholder="请选择章节分类" clearable
						class="width260 margin-right10">
						<el-option v-for="item in categoryId3Data" :key="item.id" :label="item.name" :value="item.id"
							:style="{'color': item.color?item.color:''}"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模块分类">
					<el-select filterable v-model="query.categoryId2" placeholder="请选择模块分类" :clearable="true"
						class="margin-right10 width260">
						<el-option v-for="point in categoryId2Data" :key="point.id" :label="point.name"
							:value="point.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="综合分类">
					<el-select filterable v-model="query.categoryId1" placeholder="请选择综合分类" clearable
						class="width260 margin-right10">
						<el-option v-for="item in categoryId1Data" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题目属性">
					<el-select v-model="query.properType" placeholder="请选择题目属性" clearable class="margin-right10 width260">
						<el-option label="普通题" :value="1"></el-option>
						<el-option label="作废题" :value="2"></el-option>
						<el-option label="争议题" :value="3"></el-option>
						<el-option label="重复题" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否更新">
					<el-select v-model="query.update" placeholder="请选择" clearable class="margin-right10 width260">
						<el-option label="是" :value="true"></el-option>
						<el-option label="否" :value="false"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模糊搜索">
					<el-input placeholder="请输入关键字" v-model="query.title" class="width260 margin-right10"></el-input>
				</el-form-item>
				<template>
					<el-button type="primary" class="margin-left10" @click="handleSearch">搜索</el-button>
					<el-button type="danger" @click="handleAdd">添加</el-button>
				</template>
			</el-form>
			<el-table :data="tableData" ref="multipleTable" border class="margin-top20"
				header-cell-class-name="table-header-style" row-key="id" @selection-change="handleSelectionChange">
				<el-table-column type="expand" width="0">
					<template slot-scope="scope">
						<div style="max-width:50vw;max-height: 500px;overflow-y: scroll;" class="margin-left20"
							v-if="scope.row.type.value==99||scope.row.type.value==114||scope.row.type.value==113||scope.row.type.value==115">
							<div class="color252525 margin-right10">题目：<span v-html="scope.row.title"></span></div>
							<div v-for="(item,index) in scope.row.clozeList" :key="index" class="margin-top30">
								<div class="color252525">
									<div class="row-me">{{index+1}}.<div v-html="item.title"></div>
									</div>
									<div v-if="item.content">
										<div class="margin-top10" v-for="(val,i) in JSON.parse(item.content)" :key="i">
											{{val.title}}.<img class="width100" v-if="judgeImg(val.content)" :src="val.content" alt=""> <span
												v-else>{{val.content}}</span>
										</div>
									</div>
								</div>
								<div class="row-me margin-top10">
									<span class="color929397 margin-right10">答案</span>
									<div class="color252525 flex1 line-height21 row-me"><span
											class="colorEE010B font-weight600 margin-right5" v-html="item.answer"></span>
										<div class="row-me">
											<div v-html="item.textExplain"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div style="max-width:50vw;" class="margin-left20" v-else>
							<div class="row-me">
								<span class="color929397 margin-right10">题目</span>
								<div class="flex1 color252525">
									<div style="white-space:pre-line" v-html="scope.row.title"></div>
									<div v-if="scope.row.type.value!=100">
										<div class="margin-top10" v-for="(item,index) in scope.row.optionList" :key="index">
											{{item.title}}.<img class="width100" v-if="judgeImg(item.content)" :src="item.content" alt="">
											<span v-else v-html="item.content"></span>
										</div>
									</div>
								</div>
							</div>
							<div class="row-me margin-top10" style="max-height: 500px;overflow-y: auto;"
								v-if="scope.row.type.value==100">
								<span class="color929397 margin-right10">答案</span>
								<div class="flex1">
									<div v-for="(item,index) in scope.row.clozeList" :key="index"
										class="color252525 flex1 line-height21 margin-bottom10">
										<div v-if="item.content">
											<div v-for="(val,i) in JSON.parse(item.content)" :key="i">{{val.title||''}}、{{val.content||''}}
											</div>
										</div>
										<div class="row-me">
											<span class="colorEE010B font-weight600 margin-right5">{{item.answer}}</span>
											<div class="row-me">
												<div v-html="item.textExplain"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row-me margin-top10" v-else>
								<span class="color929397 margin-right10">答案</span>
								<div class="color252525 flex1 line-height21 row-me"><span
										class="colorEE010B font-weight600 margin-right5" v-html="scope.row.answer"></span>
									<div class="row-me">
										<div v-html="scope.row.textExplain"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="row-me row-center margin-top10 margin-left20">
							<span class="color929397 margin-right10">来源</span>
							<div class="row-me flex-wrap">
								<el-tag class="margin-right10" v-for="(item,index) in scope.row.examSource"
									:key="index">{{item}}</el-tag>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column type="selection" width="55" align="center" :selectable="checkSelectable"></el-table-column>
				<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
				<el-table-column prop="id" label="题目ID" align="center" width="100"></el-table-column>
				<el-table-column label="题目" :show-overflow-tooltip="true" width="600">
					<template slot-scope="{row}">
						<span v-if="row.title" class="line2" v-html="row.title"></span>
						<span v-else>{{row.name||''}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="type.name" width="100" label="题型" align="center"></el-table-column>
				<el-table-column width="300" label="分类" align="center">
					<template slot-scope="{row}">
						<span class="line1">{{ row.category3 }}/{{ row.category2 }}/{{row.category1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="是否更新" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.update?'是':'否'}}</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNo"
					:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="选择分类" :visible.sync="addVisible" width="600px" top="1vh" class="typeDialog">
			<el-form :model="form" label-width="80px">
				<el-form-item label="科目">
					<el-select placeholder="请选择科目" v-model="form.appid" class="margin-right10 width100Per"
						@change="newAppidChange">
						<el-option v-for="miniApp in miniNewApps" :key="miniApp.id" :label="miniApp.name"
							:value="miniApp.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题型">
					<el-select v-model="form.type" placeholder="请选择题型" clearable class="margin-right10 width100Per">
						<el-option v-for="item in typeNewList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="章节分类">
					<el-select filterable v-model="form.categoryId3" placeholder="请选择章节分类" clearable
						class="width100Per margin-right10">
						<el-option v-for="item in categoryId3NewData" :key="item.id" :label="item.name" :value="item.id"
							:style="{'color': item.color?item.color:''}"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模块分类">
					<el-select filterable v-model="form.categoryId2" placeholder="请选择模块分类" :clearable="true"
						class="margin-right10 width100Per">
						<el-option v-for="point in categoryId2NewData" :key="point.id" :label="point.name"
							:value="point.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="综合分类">
					<el-select filterable v-model="form.categoryId1" placeholder="请选择综合分类" clearable
						class="width100Per margin-right10">
						<el-option v-for="item in categoryId1NewData" :key="item.id" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题目标签">
					<el-select v-model="form.labelIds" multiple filterable placeholder="请选择题目标签" clearable
						class="margin-right10 width100Per">
						<el-option :label="item.name" v-for="item in tagList" :key="item.id" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="row-me center-all">
				<el-button type="primary" @click="handleSave">更新到题库</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					pageNo: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				form: {},
				visible: false,
				addVisible: false,
				miniApps: [],
				typeList: [],
				categoryId3Data: [],
				categoryId2Data: [],
				categoryId1Data: [],
				tagList: [],
				page: '',
				miniNewApps: [],
				typeNewList: [],
				categoryId1NewData: [],
				categoryId2NewData: [],
				categoryId3NewData: [],
				multipleSelection: [],
			}
		},
		mounted() {
			this.getAll()
			this.getType()
			this.getNewAll()
			this.getNewType()
		},
		methods: {
			appidChange() {
				this.query.categoryId1 = ''
				this.query.categoryId2 = ''
				this.query.categoryId3 = ''
				this.getSort()
			},
			checkSelectable(row, index) {
				if (row.isSync) {
					return false
				} else {
					return true
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			async handleSave() {
				this.form.questions = this.multipleSelection
				this.form.labelIds = this.form.labelIds ? this.form.labelIds.toString() : ''
				const res = await this.$post('/admin/syncZjbd/addQuestions', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.addVisible = false
					this.$refs.multipleTable.clearSelection()
					this.getData()
					this.$emit('handleOk')
				}
			},
			judgeImg(content) {
				let type = ['.jpg', '.png', '.jpeg', '.svg']
				for (let item of type) {
					if (content.indexOf(item) != -1) {
						return true
					}
				}
				return false
			},
			handlePageChange(val) {
				this.query.pageNo = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			show(page) {
				this.page = page
				this.visible = true
				this.$refs.multipleTable.clearSelection()
			},
			async getData() {
				const res = await this.$post('/admin/syncZjbd/getQuestions', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			handleSearch() {
				this.query.pageNo = 1
				this.getData();
			},
			//获取标签下拉
			async getTagList() {
				const res = await this.$post('/admin/label/labelList', {
					pageNumber: 1,
					pageSize: 9999,
					appid: this.query.appid
				})
				if (res.code == 1000) {
					this.tagList = res.data.list
				}
			},
			handleAdd() {
				this.form = {
					appid: this.form.appid
				}
				this.addVisible = true
			},
			//获取科目
			async getAll() {
				const res = await this.$get('/admin/syncZjbd/getMiniApp')
				if (res.code == 1000) {
					this.miniApps = res.data;
					this.query.appid = this.miniApps.length ? this.miniApps[0].appid : ''
					this.getData()
					this.getSort()
				}
			},
			//获取新科目
			async getNewAll() {
				const res = await this.$get('/admin/minis/getAll')
				if (res.code == 1000) {
					this.miniNewApps = res.data;
					this.form.appid = this.miniNewApps.length ? this.miniNewApps[0].id : ''
					this.getNewSort()
					this.getTagList()
				}
			},
			newAppidChange() {
				this.$set(this.form, 'categoryId3', '')
				this.$set(this.form, 'categoryId2', '')
				this.$set(this.form, 'categoryId1', '')
				this.$set(this.form, 'labelIds', [])
				this.getNewSort()
				this.getTagList()
			},
			//获取题型
			async getType() {
				const res = await this.$get('/admin/syncZjbd/getQuestionType')
				if (res.code == 1000) {
					this.typeList = res.data
				}
			},
			//获取题型
			async getNewType() {
				const res = await this.$get('/admin/questionType/getQuestionSort', this.query)
				if (res.code == 1000) {
					this.typeNewList = res.data
				}
			},
			getSort() {
				this.$get('/admin/syncZjbd/getQuestionCategory', {
					type: 0,
					appid: this.query.appid || ''
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId1Data = res.data
					}
				})
				this.$get('/admin/syncZjbd/getQuestionCategory', {
					type: 1,
					appid: this.query.appid || ""
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId2Data = res.data
					}
				})
				this.$get('/admin/syncZjbd/getQuestionCategory', {
					type: 2,
					appid: this.query.appid || ''
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId3Data = res.data
					}
				})
			},
			getNewSort() {
				this.$get('/admin/question/getQuestionCategorys', {
					type: 0
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId1NewData = res.data.list
					}
				})
				this.$get('/admin/question/getQuestionCategorys', {
					type: 1
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId2NewData = res.data.list
					}
				})
				this.$get('/admin/question/getQuestionCategorys', {
					type: 2
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId3NewData = res.data.list
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.typeDialog /deep/ .el-dialog {
		margin-top: 1vh !important;
	}
</style>